前端面试题总结

还有7天，2018年便过去了，回头看看，这段时间自己有出去面试过，也遇到了很多面试题，以下是我的一些总结，这篇关于面试的文章，我也会不定时的更新。

HTML

1.说一下你对HTML语义化的理解？

语义化就是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

2.浏览器的内核，你知道的有哪些？

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等。
Presto内核：Opera7及以上。      [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。   [ Chrome的：Blink（WebKit的分支）]

3.说一说对HTML5的离线储存的理解

离线缓存是Html5新特性之一，简单理解就是第一次加载后将数据缓存，在没有清除缓存前提下，下一次没有网络也
可以加载，用在静态数据的网页或游戏比较好用。当然，Html5新的特性都不是所有浏览器都能支持的，离线缓存也
一样。反正IE9（包括）及IE9以下的浏览器目前是不支持的。如果用在移动端，应该都能支持。检测是否支持离线
缓存也是比较简单的。

详细的使用请参考：
https://www.cnblogs.com/wuzhiquan/p/4844258.html

4.请描述一下 cookies，sessionStorage 和 localStorage 的区别

储存大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage也有大小的限制，但是比cookie大，可以达到5M或更大

有期时间：

localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage：数据在当前浏览器窗口关闭后自动删除。
cookie：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭，可以设置其过期时间

存储位置：
localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。

5.请描述一个网页从开始请求道最终显示的完整过程？

一个网页从请求到最终显示的完整过程一般可以分为如下7个步骤：
（1）在浏览器中输入网址；
（2）发送至DNS服务器并获得域名对应的WEB服务器IP地址；
（3）与WEB服务器建立TCP连接；
（4）浏览器向WEB服务器的IP地址发送相应的HTTP请求；
（5）WEB服务器响应请求并返回指定URL的数据，或错误信息，如果设定重定向，则重定向到新的URL地址；
（6）浏览器下载数据后解析HTML源文件，解析的过程中实现对页面的排版，解析完成后在浏览器中显示基础页面；
（7）分析页面中的超链接并显示在当前页面，重复以上过程直至无超链接需要发送，完成全部数据显示。

6.webSocket 如何兼容低浏览器？

Adobe Flash Socket
ActiveX HTMLFile（IE）
基于 multipart 编码发送 XHR
基于长轮询的 XHR

CSS

1.怎样让一个div垂直居中

第一：定位之后根据div的宽高计算margin;
第二:flex布局
第三:transform: translate(-50%, -50%) （定位之后）;

2.css定义的权重

!important > 行间样式 > id > class|属性|伪类 > 标签|伪元素 > 通配符

3.清除浮动的方法有哪些

第一：给父元素高度；
第二：让父元素一起浮动起来
第三：clear:both;
第四：定义伪类:after

4.使用css实现一个持续的动画效果

animation:mymove 5s infinite;
@keyframes mymove {
from {top:0px;}
to {top:200px;}
}

5.右边宽度固定，左边自适应

第一:display:flex布局；
第二：浮动；
第三：右边定位，左边给一个往右的padding；

6.对于css的hack理解

可见该文章:https://www.cnblogs.com/mumble/p/4576489.html

7.隐藏一个元素的方法有哪些

visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在
opacity: 0; CSS3属性，设置0可以使一个元素完全透明
position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外
display: none; 元素会变得不可见，并且不会再占用文档的空间。
transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留
<div hidden="hidden"> HTML5属性,效果和display:none;相同，但这个属性用于记录一个元素的状态
height: 0; 将元素高度设为 0 ，并消除边框
filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中

JS

1.对于数组的操作方法有哪些

pop() 删除一个数组中的最后的一个元素；
shift() 删除数组的第一个元素；
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
push() 向数组的末尾添加元素；
reverse() 颠倒数组中元素的顺序；
splice() 添加/删除数组元素；
sort() 数组排序；
copyWithin() 指定位置的成员复制到其他位置；
fill() 填充数组；
join() 数组转字符串；
slice() 浅拷贝数组的元素；
indexOf() 查找数组是否存在某个元素，返回下标；
includes() 查找数组是否包含某个元素 返回布尔；
every 检测数组所有元素是否都符合判断条件；
some 数组中的是否有满足判断条件的元素；
filter 过滤原始数组，返回新数组；
map 对数组中的每个元素进行处理，返回新的数组；
reduce 为数组提供累加器，合并为一个值；

更多的方法和方法对于的参数用法等，可以自己再去了解一下。

2.数组去重的方法

[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]
或者使用for循环

3.数据类型

Boolean
Null
Undefined
Number
String
Symbol :（ECMAScript 6 新定义 ，Symbol 生成一个全局唯一、表示独一无二的值） 
Object :（Array、Function、Object）

4.你对重绘、重排的理解？

重绘：不重新布局，只是元素的外观改变;
重排：重排是更明显的一种改变，可以理解为渲染树需要重新计算，重排一定会引起重绘。


页面渲染初始化（这个无法避免）
DOM元素的几何属性变化：元素尺寸（宽或高）改变。
DOM树的结构变化：例如节点的增减（添加或者删除可见的DOM元素），移动，元素位置改变等。
改变元素的一些样式，调整浏览器窗口大小，滚动条出现等等

以上都会让页面发生重排

5.说说你要用到的es6和es7

对于这个问题，建议大家能阮一峰老师的书
http://es6.ruanyifeng.com/#docs/module

6.函数节流是什么，有什么优点

目的：
从字面上就可以理解，函数节流就是用来节流函数从而一定程度上优化性能的。例如，DOM 操作比起非DOM 交互需
要更多的内存和CPU 时间。连续尝试进行过多的DOM 相关操作可能会导致浏览器挂起，有时候甚至会崩溃。尤
在IE 中使用onresize 事件处理程序的时候容易发生，当调整浏览器大小的时候，该事件会连续触发。在oresize 
事件处理程序内部如果尝试进行DOM 操作，其高频率的更改可能会让浏览器崩溃。又例如，我们常见的
一个搜索的功能，我们一般是绑定keyup事件，每按下一次键盘就搜索一次。但是我们的目的主要是每输入一些内容
搜索一次而已。为了解决这些问题，就可以使用定时器对函数进行节流。

函数节流的原理：
某些代码不可以在没有间断的情况连续重复执行。第一次调用函数，创建一个定时器，在指定的时间间隔之后运行
代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操
作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器。目的是只有在执行
函数的请求停止了一段时间之后才执行。
http://www.cnblogs.com/LuckyW...

7.你知道哪些HTTP的状态码，他们分别代表什么

我们一般常见的就是200，304，400，401，404，405，500等，详细可见如下地址
http://tool.oschina.net/commons?type=5

8.说一说你对闭包的理解

官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也
是该表达式的一部分。
太官方了，硬是绕口，我觉得闭包简单来说就是函数套函数，有权访问另一个函数作用域内变量的函数。
闭包的好处就是：
1.希望一个变量长期驻扎在内存中；
2.避免全局变量的污染。
3.私有成员的存在。
闭包的缺点：
1.常驻内存，增加内存使用量。
2.使用不当会很容易造成内存泄露。

9.判断数据类型的方法有哪些

var a = [1,2,3]

1.最常见的判断方法：**typeof**
alert(typeof a)   ------------> object

2.判断已知对象类型的方法： **instanceof**
alert(a instanceof Array) ---------------> true

3.**Object.prototype.toString** 
Object.prototype.toString.call('') ; --------------->[object String]

4.**constructor**
alert(c.constructor === Array) ----------> true

5.**jquery.type()**
如果对象是undefined或null，则返回相应的“undefined”或“null”。
jQuery.type( undefined ) === "undefined"
jQuery.type( null ) === "null"
如果对象有一个内部的[[Class]]和一个浏览器的内置对象的 [[Class]] 相同，我们返回相应的 [[Class]] 名
字。 (有关此技术的更多细节。 )
jQuery.type( true ) === "boolean"
jQuery.type( 3 ) === "number"
jQuery.type( "test" ) === "string"
其他一切都将返回它的类型“object”。

还有很大一部分关于js的面试题，之后再继续补充